import React from "react";
import { useSelector } from "react-redux";
import { Link } from "react-router-dom";
import { selectAllAuthors } from "./authorsSlice";

export const AuthorsList = () => {
  const authors = useSelector(selectAllAuthors);

  const renderedAuthors = authors.map(author => (
    <li key={author.id}>
      <Link to={`/authors/${author.id}`}>{author.name}</Link>
    </li>
  ))

  return (
    <section>
      <h2>Authors</h2>
      <ul>{renderedAuthors}</ul>
    </section>
  )
}